/* 空状态组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/font.less';
@import '../base/window.less';

/* 空状态变量 */
:root {
  --empty-padding: calc(40 * var(--unit)) calc(24 * var(--unit));
  --empty-padding-small: calc(32 * var(--unit)) calc(20 * var(--unit));
  --empty-padding-large: calc(64 * var(--unit)) calc(32 * var(--unit));
  --empty-icon-size: calc(64 * var(--unit));
  --empty-icon-size-small: calc(48 * var(--unit));
  --empty-icon-size-large: calc(96 * var(--unit));
  --empty-icon-color: var(--color-icon-tertiary);
  --empty-title-margin: calc(16 * var(--unit));
  --empty-description-margin: calc(8 * var(--unit));
  --empty-action-margin: calc(24 * var(--unit));
}

/* 基础空状态样式 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--empty-padding);
  text-align: center;
}

.empty-icon {
  width: var(--empty-icon-size);
  height: var(--empty-icon-size);
  margin-bottom: var(--empty-title-margin);
  color: var(--empty-icon-color);
  opacity: 0.6;
  
  svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.empty-title {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-font-primary);
  margin: 0 0 var(--empty-description-margin);
}

.empty-description {
  font-size: var(--font-size-body-medium);
  color: var(--color-font-secondary);
  margin: 0 0 var(--empty-action-margin);
  max-width: calc(400 * var(--unit));
  line-height: 1.5;
}

.empty-action {
  margin-top: var(--empty-action-margin);
}

/* 空状态尺寸 */
.empty-small,
.empty.small {
  padding: var(--empty-padding-small);
  
  .empty-icon {
    width: var(--empty-icon-size-small);
    height: var(--empty-icon-size-small);
  }
  
  .empty-title {
    font-size: var(--font-size-title-sub-medium);
  }
  
  .empty-description {
    font-size: var(--font-size-body-small);
  }
}

.empty-large,
.empty.large {
  padding: var(--empty-padding-large);
  
  .empty-icon {
    width: var(--empty-icon-size-large);
    height: var(--empty-icon-size-large);
  }
  
  .empty-title {
    font-size: var(--font-size-title-large);
  }
  
  .empty-description {
    font-size: var(--font-size-body-large);
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .empty-icon {
    --empty-icon-color: var(--color-icon-tertiary);
  }
}

